import { useCallback, useEffect, useState } from 'react'
import { Button, Form, Modal, Space, Table, Tag } from 'antd'
import { Popconfirm } from 'antd'
import http from '../../utils/http'
import FormItem from './components/FormItem'
import SearchForm from './components/SearchForm'
import { useLoaderData } from 'react-router-dom'
import useBtnIsAuth from '../../hooks/useBtnIsAuth'
import ListTable from './components/ListTable'
import FormAlert from './components/FormAlert'

// 查询

function Home() {
    const isAddBtn = useBtnIsAuth('add')
    const isDelBtn = useBtnIsAuth('del')
    const isQueryBtn = useBtnIsAuth('query')
    const isEditBtn = useBtnIsAuth('edit')
    console.log(isAddBtn, isDelBtn, isQueryBtn, isEditBtn)

    const [open, setOpen] = useState(false)
    const [form] = Form.useForm()
    const [title, setTitle] = useState('添加')

    const [dataSource, setDataSource] = useState([])
    const [loading, setLoading] = useState(false)
    const columns = [
        { title: 'id', dataIndex: 'id' },
        { title: '名称', dataIndex: 'name' },
        {
            title: '岗位分类',
            dataIndex: 'job',
            render(_, record) {
                const colors = {
                    总经理: 'blue',
                    销售员: 'green',
                    销售助理: 'red',
                }
                return <Tag color={colors[record.job]}>{record.job}</Tag>
            },
        },
        {
            title: '操作',
            render(_, recode) {
                return (
                    <Space>
                        {isEditBtn && (
                            <Button
                                type="primary"
                                size="small"
                                onClick={() => {
                                    setOpen(true)
                                    form.setFieldsValue(recode)
                                    setTitle('编辑')
                                }}
                            >
                                编辑
                            </Button>
                        )}
                        {isDelBtn && (
                            <Button
                                size="small"
                                onClick={() => {
                                    Modal.confirm({
                                        title: '确定要删除吗？',
                                        onOk: async () => {
                                            const res = await http.delete(
                                                'http://127.0.0.1:7001/delSchema',
                                                { params: { id: recode.id } }
                                            )
                                            const {code} = res.data
                                            if(code === 1) {
                                                getList();
                                            }
                                        },
                                    })
                                }}
                            >
                                删除
                            </Button>
                        )}
                    </Space>
                )
            },
        },
    ]

    const [job, setJob] = useState('')
    const [status, setStatus] = useState('')
    const [name, setName] = useState('')
    const [start_time, setStart_time] = useState('')
    const [end_time, setEnd_time] = useState('')
    const [pageSize, setPageSize] = useState(5)
    const [pageNum, setPageNum] = useState(1)
    const [total, setTotal] = useState(0)

    const getList = async () => {
        setLoading(true)
        const res = await http.get('http://127.0.0.1:7001/getSchemaList', {
            params: {
                job,
                status,
                name,
                start_time,
                end_time,
                pageSize: pageSize, 
                pageNum: pageNum
            },
        })
        setLoading(false)
        const { code, list, total } = res.data
        if (code === 1) {
            setDataSource(list)
            setTotal(total)
        }
    }

    useEffect(() => {
        getList()
    }, [job, status, name, start_time, end_time, pageNum, pageSize])

    const closefn = useCallback(() => {
        setOpen(false)
        form.resetFields()
    }, [form])

    const formSubmit = async (values) => {
        // 提交添加/编辑请求
        if (values.id) {
            const res = await http.put(
                'http://127.0.0.1:7001/editSchema',
                values
            )
            const { code } = res.data
            if (code === 1) {
                getList()
                closefn()
            }
        } else {
            const res = await http.post(
                'http://127.0.0.1:7001/addSchema',
                values
            )
            const { code } = res.data
            if (code === 1) {
                getList()
                closefn()
            }
        }
    }

    const searchFN = useCallback((values) => {
        setName(values.name)
        setJob(values.job)
    }, [])

    const onReset = useCallback(() => {
        setName('')
        setJob('')
    }, [])

    const pageChange = useCallback((p, ps) => {
        setPageNum(p)
        setPageSize(ps)
    }, [])

    return (
        <div>
            {isQueryBtn && (
                <SearchForm searchFN={searchFN} onResetFn={onReset} />
            )}

            {isAddBtn && (
                <Button
                    type="primary"
                    onClick={() => {
                        setOpen(true)
                        setTitle('添加')
                    }}
                >
                    添加
                </Button>
            )}

            <FormAlert
                open={open}
                title={title}
                closefn={closefn}
                form={form}
                formSubmit={formSubmit}
            />
            <ListTable
                columns={columns}
                dataSource={dataSource}
                loading={loading}
                total={total}
                pageSize={pageSize}
                pageChange={pageChange}
            />
        </div>
    )
}

export default Home

// 分页
// 聊天
// 删除
// 表格状态没有写
